<template>
  <!-- 配料步骤详情 -->
  <div id="Recipe" v-if="data != null">
    <van-nav-bar
      class="header"
      title="粥品详情 "
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    >
      <template #left>
        <!-- <router-link to="/"> -->
        <div @click="toreturn">返回</div>
        <!-- </router-link> -->
      </template>
      <template #right>
        <van-icon name="share-o" @click="showShare = true" />
        <!-- <van-cell style="width:100px" class="header" title="分享"  @click="showShare = true" /> -->
        <van-share-sheet
          v-model="showShare"
          title="立即分享给好友"
          :options="options"
          @select="onSelect"
        />
      </template>
    </van-nav-bar>
    <!-- :src="require('../assets/congee_Recipe/Congee_recipe1-1.jpg')" -->
    <!-- 头部图片 -->
    <van-image
      style="margin-top:42px"
      width="100%"
      height="100%"
      :src="require(`../assets${data.mu_pic}`)"
    />
    <!-- recipe标题 -->
    <div class="Reacipe-title">
      <h3>超快手清晨醒胃暖胃粥</h3>
      <p><span>1</span>人做过 * <span>3083</span> 收藏</p>
    </div>
    <!-- src="../assets/congee_Recipe/author01-1.jpg"   味好美创意厨房-->
    <!-- 作者信息  -->
    <div class="author">
      <img :src="require(`../assets${data.mu_avatar}`)" alt />
      <div class="author-mes">
        <p>{{ data.mu_aname }}</p>
        <p>时间</p>
      </div>
    </div>

    <!-- 简介  爸爸喜欢炒菜时拍点呼叫下去 我也喜欢上百胡椒的味道了
        在不舒服或者酒后或者大鱼大肉后吃完暖胃粥最适合不过了 -->
    <div class="brief">
      <p>
        {{ data.mu_introduce }}
      </p>
    </div>

    <!-- 用料 -->
    <p style="margin-left:5%">用料</p>
    <div class="used">
      <div>用料</div>
      <div>适量</div>
    </div>

    <!-- 循环 材料 -->
    <div class="used" v-for="(food, i) in foods" :key="i">
      <div>{{ food.food }}</div>
      <div>{{ food.dose }}</div>
    </div>
    <br />
    <br />

    <!-- 步骤 -->
    <div>
      <!-- 按钮 -->
      <button class="btn-cooking">烹饪模式</button>
      <div class="step" v-for="(item, index) in dataStep" :key="index">
        <!-- 步骤 顺序-->
        <div>
          <p>步骤{{ index + 1 }}</p>
        </div>
        <!-- :src="require('../assets/congee_Recipe/Congee_recipe1-2.jpg')" -->
        <img :src="require(`../assets/congee_Recipe/${item.spic}`)" alt />
        <p>
          {{ item.sintroduce }}
        </p>
      </div>
    </div>

    <!-- 底部边距 -->
    <div style="margin-top:45px"></div>

    <!-- 底部收藏评论 -->
    <div class="footer">
      <!-- <van-cell is-link title="基础用法" @click="show = true" />
      <van-action-sheet v-model="show" :actions="actions" @select="onSelect" />-->
      <!-- <van-action-sheet v-model="show" title="标题">
        <div class="content">内容</div>
      </van-action-sheet> -->

      <p @click="collection" class="collect">
        <van-icon :name="like ? 'like' : 'like-o'" />
        <span>收藏</span>
      </p>

      <p>
        <van-icon name="share-o" />
        <span>传作品</span>
      </p>

      <p>
        <van-icon name="share-o" />
        <span>35</span>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showShare: false,
      like: false,
      uname: "",
      options: [
        { name: "微信", icon: "wechat" },
        { name: "微博", icon: "weibo" },
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
        { name: "二维码", icon: "qrcode" },
      ],
      data: null,
      dataStep: [],
      foods: [],
    };
  },
  methods: {
    toreturn() {
      this.$router.go(-1);
    },
    onClickLeft() {
      // Toast('返回');
    },
    onClickRight() {
      // Toast('按钮');
    },
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
    // 点击切换收藏
    collection() {
      //  this.uname=this.$store.state.uname.nick_name.slice(0,-3);
      //  this.data.coll_name=this.uname
      if (!sessionStorage.getItem("islogin")) {
        this.$dialog.alert({
          message: "您还未登录😅，需要登录一下哦，没有账号可以免费注册一个😘",
        });
        this.$router.push("/register");
      } else {
        this.$toast.success("收藏成功");
        
      }
      let {
        mu_aname,
        mu_avatar,
        mu_id,
        mu_introduce,
        mu_pic,
        mu_tips,
        mu_title,
        sintroduce,
        spic,
        suid,
      } = { ...this.data };
      console.log({ ...this.data });

      this.axios
        .get(
          `/congee/collection?coll_id=${mu_id}&coll_title=${mu_title}&coll_pass=${mu_introduce}&coll_pic=${mu_pic}&coll_username=${mu_aname}`
        )
        .then((result) => {
          console.log(result);
        });

      this.like = !this.like;
    },
  },
  // 页面加载后执行
  mounted() {
    // 获取用户点击的menu的id
    window.scrollTo(0, 0); // 控制窗口滚动条滚动到顶部
    let id = this.$route.query.mu_id;
    console.log(id);
    // 发送http请求 当前粥谱的详细数据
    this.axios.get("/congee/recipe?mu_id=" + id).then((result) => {
      console.log(result);
      this.dataStep = result.data.msg;
      this.data = result.data.msg[0];
      console.log(this.data);
      // if()

      // console.log(this.dataStep);
      // console.log(this.dataStep[0].mu_pic);
      // console.log(this.data.mu_pic);
    });

    // 发送请求获取 粥谱的食材数据
    this.axios.get("/congee/recipe/food?mu_id=" + id).then((res) => {
      //console.log(res);
      this.foods = res.data.msg;
      //console.log(this.foods);
    });
  },
};
</script>

<style lang="scss" scoped>
#Recipe {
  .header {
    width: 100%;
    position: fixed;
    z-index: 1;
    background-color: #eeeeee;
  }

  .Reacipe-title {
    text-align: center;
    margin: 0 auto;
    width: 90%;
    border-bottom: 0.3333333px solid #cccccc;
  }
  .line {
    width: 90%;
    height: 0.1px;
    color: #ccc;
    text-align: center;
  }
  // 作者信息部分
  .author {
    margin: 15px;

    img {
      width: 55px;
      height: 55px;
      border-radius: 50%;
      float: left;
    }
    .author-mes {
      margin-left: 60px;
      p:nth-child(1) {
        margin: 0;
        padding: 2px;
        font-size: 16px;
      }
      p:nth-child(2) {
        margin: 0;
        padding: 2px;
        font-size: 12px;
        color: #ccc;
      }
    }
  }
  // 简介
  .brief {
    width: 60%;
    margin-left: 20px;
  }
  // 用料
  .used {
    margin: 0 auto;
    text-align: left;
    width: 90%;
    display: flex;
    justify-content: space-around;
    border-bottom: 1px dashed #ccc;
    div {
      width: 50%;
      padding: 10px 0px;
    }
  }

  // 按钮
  .btn-cooking {
    background-color: transparent;
    border: 1px solid #ccc;
    border-radius: 20px;
    padding: 5px;
    position: absolute;
    right: 20px;
    // 基线对其
    vertical-align: middle;
  }

  // 步骤
  .step {
    width: 95%;
    margin: 0 auto;
    img {
      width: 100%;
      height: 180px;
      border-radius: 10px;
    }
  }

  // 底部
  .footer {
    width: 100%;
    height: 40px;
    position: fixed;
    background-color: white;
    bottom: 0;
    display: flex;
    border-top: 1px solid #ccc;
    p {
      margin: 10px;
    }
    p:nth-child(1) {
      // display: inline-block;
      color: orange;
      margin: 10px 5px 10px 10px;
    }
  }
}
</style>
